<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="primary" @click="addProjectBtn()">关联项目</el-button>
      </el-col>
    </el-row>
    <Table :tableArr="projectList" :pagination="data.page" :columns="data.columns" :isCheckbox="true"
      :total="data.page.total" :dataSources="true">
      <template #operate="{ row }">
        <el-button size="small" type="danger" @click="handleDelete(row)">取消关联</el-button>
      </template>
    </Table>

    <el-dialog v-model="data.projectDia" append-to-body width="50%" top="10vh" :show-close="false"
      :close-on-click-modal="false">
      <template #title>
        <div class="my-header">
          <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="关联项目" name="first">
              <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon label-position="left" label-width="60px"
                :inline="true" class="demo-form-inline">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目" prop="projectName">
                      <SelectOption :selectValue="form.projectName" :options="data.projectSelect" @change-value="changeValue">
                      </SelectOption>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单位" prop="unitName">
                      <SelectOption :selectValue="form.unitName" :options="data.unitSelet" @change-value="changeValue1">
                      </SelectOption>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.projectDia = false">关闭</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
<script lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import Table from '@/views/science/components/table/table.vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import common from '@/views/science/common/common.json'
import { delectProject, addProject } from '../../api/hignEnd'
import { getprojectList } from '../../api/common'
import { tips } from '@/views/science/components/tips/tips'
import { useStore } from 'vuex'

export default {
  components: {
    Table,
    SelectOption
  },
  emits: {
    dataChange: null,
    projectParams: null,
  },
  props: {
    projects: {
      type: Array,
      required: true,
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    const data = reactive({
      columns: common.platformProjectHeader,
      activeName: ref('first'),
      page: {
        page: 1,
        limit: 10,
        total: 0,
      },
      projectDia: false,
      unitSelet: computed(() => store.state.technologyStrength.unitSelet),
      projectSelect: computed(() => store.state.technologyStrength.projectSelect),
    })
    const projectList = ref(props.projects)


    watch(props, (newValue, oldValue) => {
      projectList.value = newValue.projects
    });



    const form = reactive({
      projectId: '',
      projectName: '',
      unitld: '',
      unitName: ''
      // id: computed(() => store.state.technologyStrength.rowId),
    })

    const changeValue = (item) => {
      form.projectId = item.id
      form.projectName = item.projectname
    }
    const changeValue1 = (item) => {
      form.unitld = item.id
      form.unitName = item.name
    }

    const addProjectBtn = () => {
      data.projectDia = true
    }

    const handleDelete = async (row) => {
      if (row.id) {
        let res = await delectProject(row.id)
        if (res.data.success) {
          emit('dataChange')
        }
      } else {
        var index = projectList.value.indexOf(row);
        if (index > -1) {//大于0 代表存在，
          projectList.value.splice(index, 1);//存在就删除
        }
      }
    }

    const rules = reactive({
      projectName: [
        { required: true, message: '请选择项目', trigger: 'change' },
      ],
      unitName: [
        { required: true, message: '请选择单位', trigger: 'change', },
      ]
    })

    const ruleFormRef = ref()
    const save = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          let obj = {
            projectId: form.projectId,
            projectName: form.projectName,
            unitld: form.unitld,
            unitName: form.unitName
          }
          if (JSON.stringify(projectList.value).indexOf(JSON.stringify(obj)) == -1) {
            projectList.value.push(obj)
          } else {
            tips('不可添加相同项目', 'warning')
          }

          Object.keys(form).forEach((key) => {
            form[key] = ''
          })

          data.page.total = projectList.value.length
          emit('projectParams', projectList)
          data.projectDia = false
        } else {
          console.log('校验失败')
        }
      })
    }

    return {
      data,
      form,
      projectList,
      rules,
      ruleFormRef,

      changeValue,
      changeValue1,
      handleDelete,
      addProjectBtn,
      save
    }
  },
}
</script>
    
<style scoped lang="scss">
:deep(.el-dialog__body) {
  display: none;
}

.el-select {
  width: 100%;
  margin: 0;
}
</style>
    